<template>
  <div>
    <Header></Header>
    <div class="img_container">
      <template v-for="(img, index) in imgList">
        <el-image
          @click = "toDetail(img.id)"
          class ="img_img"
          :src="img.url"
          fit="fill">
        </el-image>

      </template>

    </div>
    <div class="img_block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20,40, 60, 80,100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <Footer></Footer>
  </div>
</template>


<script>
import Header from '@/views/tool/build/Header.vue'
import Footer from '@/views/tool/build/Footer.vue'
import {getImgList} from '@/api/showImg/img'

export default {
  components: {Footer, Header},
  data() {
    return {
      imgList: [],
      currentPage: 1,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      }

    }
  },
  created() {
    this.getImgList()

  },
  watch: {},
  mounted() {

  },
  methods: {
    // 获取导航分类
    getImgList() {
      this.loading = true;
      getImgList(this.queryParams).then(response => {
        this.imgList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getImgList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getImgList()
    },
    toDetail(id){
      this.$router.push('/showImg/detail/'+id);
    }

  }
}
</script>

<style scoped lang="scss">
.img_container{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 每行四个元素 */
  gap: 10px; /* 元素之间的间隙 */
  padding: 20px;
}
.img_img{
  border-radius: 10px;
  text-align: center;
}

.img_img:hover{
  box-shadow: 1px 1px 30px 1px rgba(237,237,237,1.00);
  transform: scale(1.2);
  z-index: 9;
  opacity: 0.95;

}

.img_block {
  margin: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}



</style>
